<template>
    <!--登录页面-->
    <div class="wrap">
        <!-- 头部 -->
        <div class="header">
            <img class="logo" src="../../assets/img/login/LoginLOGO.png" alt="">
            <p class="headerTxt">商家后台管理平台</p>
        </div>
        <!------------------------------------------------------------------------------ 中心内容 -->
        <div class="content">
            <div class="contentBJ">
                <!-- 登录框内容 -->
                <div class="center">
                    <div class="centerHeader">
                        <img @click="Toback" src="./../../assets/img/login/LoginNestBack.png" alt="">
                        <p>我要开店</p>
                    </div>
                    <p class="centerTxt">密码登录</p>
                    <div class="centerInput">
                        <!--登陆账号-->
                        <input ref="account" type="text" placeholder="请输入账号">
                        <img src="./../../assets/img/login/loginUser.png" alt="">
                    </div>
                    <div class="centerInput">
                        <!--登录密码-->
                        <input ref="password" type="password" placeholder="请输入密码">
                        <img src="./../../assets/img/login/loginPassword.png" alt="">
                    </div>
                    <p class="login" @click="login">登 录</p>
                    <p class="centerTxtOne">
                        <span @click="toRegister">免费注册</span>
                        <span @click="toLostPassword">忘记密码</span>
                    </p>
                    <img class="LoginCodeOne" @click="LoginCode" src="./../../assets/img/login/LoginNestOneCode.png" alt="">
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <p>© 2019 LyhDF.com 版权所有</p>
            <p>网络文化经营许可证：89741464351</p>
        </div>
    </div>
</template>

<script>
    import { Loading } from 'element-ui';

    export default {
        name: "loginNestOne",
        data(){
            return {
                // fullscreenLoading: false,
            }
        },
        methods:{
            login(){
                var account = this.$refs.account.value;
                var password = this.$refs.password.value;
                console.log(account,password);

                var login = Loading.service();
                setTimeout(()=>{
                    login.close();
                    this.$router.push('/setShop');
                },1000)
            },
            Toback(){
                this.$router.push("/");
            },
            // 切换二维码登录
            LoginCode(){
                this.$message.closeAll();
                this.$message({
                    showClose: true,
                    message: '等待开发中!'
                });
            },
            // 跳转注册页面
            toRegister(){
                // 清除注册页面的存储数据
                localStorage.removeItem("RegisterIndex");
                this.$router.push("/register");
            },
            // 跳转登录页面
            toLostPassword(){
                this.$router.push("/lostPassword");
            }
        },
        mounted(){

        }
    }
</script>

<style scoped>
    .header{
        width: 1200px;
        height: 90px;
        margin: 0 auto;
        background: #ffffff;
    }
    .header .logo{
        width: 61px;
        height: 56px;
        margin-top: 19px;
        float: left;
    }
    .header .headerTxt{
        float: left;
        line-height: 90px;
        margin-left: 10px;
        font-family: "PingFang-SC-Bold";
        font-size: 30px;
        color: #E8271A;
        font-weight: Bold;
    }
    /* 中心内容 */
    .content{
        width: 100%;
        height: 100%;
        padding: 0px;
        overflow: hidden;
        background: url("./../../assets/img/login/LoginNestOneContentBJ.png");
        background-size: 1920px 600px;
    }
    .contentBJ{
        width: 1200px;
        height: 600px;
        margin: 0 auto;
    }
    .center{
        width:350px;
        height:370px;
        margin-top: 115px;
        background:rgba(237,237,237,1);
        float: right;
        position: relative;
    }
    /* 登录框样式 */
    .centerHeader{
        width:350px;
        height:45px;
        background:linear-gradient(4deg,rgba(75,54,121,1),rgba(89,51,144,1));
    }
    .centerHeader p{
        height:45px;
        line-height:45px;
        font-size:20px;
        text-align: center;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        color: #ffffff;
        text-indent: -50px;
    }
    .centerHeader img{
        width: 21px;
        height: 18px;
        margin: 15px 13px;
        float: left;
        cursor: pointer;
    }
    .centerTxt{
        height: 50px;
        font-size:17px;
        text-indent: -20px;
        font-family:"PingFang-SC-Bold";
        font-weight: 600;
        color:rgba(51,51,51,1);
        line-height:50px;
    }
    .centerInput{
        margin: 0 25px;
        width:300px;
        height:40px;
        line-height: 40px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(224,224,224,1);
        position: relative;
        margin: 10px auto;
        overflow: hidden;
    }
    .centerInput input{
        border: none;
        width:300px;
        height:40px;
        margin: 0;
        text-indent: 40px;
        font-size:14px;
    }
    .centerInput input:focus{
        border: none;
    }
    .centerInput :-ms-input-placeholder{
        text-indent: 40px;
    }
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        text-indent: 40px;
        font-size:14px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(204,204,204,1);
    }
    ::-moz-placeholder { /* Firefox 19+ */
        text-indent: 40px;
        font-size:14px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(204,204,204,1);
    }
    :-ms-input-placeholder { /* IE 10+ */
        text-indent: 40px;
        font-size:14px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(204,204,204,1);
    }
    :-moz-placeholder { /* Firefox 18- */
        text-indent: 40px;
        font-size:14px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(204,204,204,1);
    }
    .centerInput img{
        position: absolute;
        width: 16px;
        height: 18px;
        left: 10px;
        top: 12px;
    }
    .login{
        width:300px;
        height:40px;
        line-height:40px;
        font-size:20px;
        text-align: center;
        background: -webkit-linear-gradient(top, #4B3679, #593390); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(bottom, #4B3679, #593390); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(bottom, #4B3679, #593390); /* Firefox 3.6 - 15 */
        background: linear-gradient(to bottom, #4B3679 , #593390); /* 标准的语法 */
        border-radius: 10px;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color: #ffffff;
        margin: 20px auto;
        overflow: hidden;
        cursor:pointer;
    }
    .centerTxtOne span{
        display: inline-block;
        width: 170px;
        height: 23px;
        line-height: 23px;
        font-size:14px;
        font-family:"PingFang-SC-Medium";
        font-weight:600;
        text-align: center;
        color: #4E357E;
        cursor: pointer;
    }









    /* 底部样式 */
    .footer{
        height: 200px;
        text-align: center;
        margin: 70px auto 80px;
    }
    .footer p{
        font-size: 12px;
        color: #333333;
        font-family: "PingFang-SC-Medium";
        line-height: 22px;
    }



    .LoginCodeOne{
        float: right;
        margin-right: 20px;
        cursor: pointer;
    }

    .left{
        float: left;
    }
    .right{
        float: right;
    }
</style>

